import { useRef, useState } from 'react';
import { Button, Toast } from '@douyinfe/semi-ui'
import './Editor.less'

function Editor() {
  const editorRef = useRef(null);

  function handleSendClick() {
    // 文本内容
    let content = editorRef.current.innerText;
    if(!content) {
      Toast.warning({
        content: '请输入内容',
        showClose: false
      })
      return;
    }

    contentSubmit()
  }

  function contentSubmit() {
    let id = Toast.info({
      content: '发送中...',
      showClose: false,
      duration: 0
    })
    setTimeout(() => {
      Toast.close(id);
      Toast.success({
        content: '发送成功',
        showClose: false
      })
      editorRef.current.innerText = '';
    }, 1000)
  }

  return (
    <div className="site-editor__component">
      <div className="site-char-editor" ref={editorRef} contentEditable></div>
        <div className="site-char-area__functions">
          <div></div>
          <div>
            <Button theme='solid' type='primary' onClick={handleSendClick}>发送</Button>
          </div>
        </div>
    </div>
  )
}

export default Editor;